<script setup lang="ts">
  import { FAction, leaveType } from '@/plugins/constants'
  import { robotAction } from '@/plugins/session'
  import { useChatStore } from '@/store/chat'
  import { useSessionStore } from '@/store/session'
  import { remove } from 'lodash'
  import { v7 as uuidv7 } from 'uuid'
  import { showConfirmDialog } from 'vant'
  import { type PropType } from 'vue'
  const session = useSessionStore()
  const chat = useChatStore()
  const props = defineProps({
    message: {
      type: Object as PropType<any>,
      default: () => {},
    },
  })
  const cancelLeave = () => {
    showConfirmDialog({
      message: '确认取消留言?',
    }).then(() => {
      switch (session.leaveType) {
        case leaveType.CANCEL_QUEUE:
          // 取消留言进入机器人状态
          session.updateActionState(FAction.DESTROY)
          remove(chat.messages, { type: 'leave' })
          break
        case leaveType.NO_WORKER_TIME:
          // 取消留言进入机器人状态
          session.updateActionState(FAction.ROBOT)
          remove(chat.messages, { type: 'leave' })
          robotAction.stop()
          robotAction.start()
          break
      }
    })
  }
  // 非工作时间留言
  const startLeave = () => {
    session.updateActionState(FAction.VISITOR_LEAVE)
    session.updateLeaveType(leaveType.NO_WORKER_TIME)
    chat.updateLeaveMessages({
      role: 'system',
      type: 'leave',
      state: 'VisitorLeave',
      content: '坐席不在工作时间',
      id: uuidv7(),
    })
  }
</script>

<template>
  <div
    v-if="props.message.state === 'VisitorLeave'"
    class="leave-container inline-block flex-col items-center justify-center text-[14px] text-[#3d3d3d] rounded-[4px] px-2 py-1"
  >
    <span>请输入留言并发送</span>或<span
      class="text-[#1989fa]"
      @click="cancelLeave"
      >取消留言</span
    >
  </div>
  <div
    v-if="props.message.state === 'leaveSuccess'"
    class="leave-container inline-block flex-col items-center justify-center text-[14px] text-[#3d3d3d] rounded-[4px] px-2 py-1"
  >
    <span>留言发送成功</span>
    <br />
    <span class="text-[#1989fa]" @click="cancelLeave">取消留言</span>
  </div>
  <!-- 非工作时间留言 -->
  <div
    v-if="props.message.state === 'NO_WORKER_TIME'"
    class="leave-container inline-block flex-col items-center justify-center text-[14px] text-[#3d3d3d] rounded-[4px] px-2 py-1"
  >
    <span>坐席非工作时间</span>
    <br />
    <span class="text-[#1989fa]" @click="startLeave">留言</span>
  </div>
</template>

<style scoped></style>
